<template>
    <div class='tmp'>
        <div class='pictureshow_header'>
            <ul ref="cateul">
                <li @click='getpicshowlist(0)'>全部</li>
                <li v-for='item in piclist' @click='getpicshowlist(item.id)'>{{item.title}}</li>
            </ul>
        </div>
        <div class="mui-card" v-for='item in picshowlist'>
            <router-link v-bind="{to:'/photo/imageshow/'+item.id}">
                <div class="mui-card-header mui-card-media" style="height:40vw;">
                    <img class='lazyimg' v-lazy ="item.img_url">
                </div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p>{{item.title}}</p>
                    </div>
                </div>
                <div class="mui-card-footer">
                    {{item.add_time | moments}}
                </div>
            </router-link>

        </div>
    </div>
</template>
<script>
    import common from '../field/getfield.js';
    export default{
        data(){
            return {
                piclist:[],
                picshowlist:[]
            }
        },
        methods:{
            //获取图片分类数据
            getpiclist(){
                    let url = common.apidomain+'/api/getimgcategory';
                    this.$http.get(url).then(res=>{
                        this.piclist=res.body.message;
                let width = this.piclist.length*80+34;
                this.$refs.cateul.style.width=width+'px';
                })
            },
            //获取图片列表的数据
            getpicshowlist(cateid){
                console.log(cateid)
                this.picshowlist=[];
                let url = common.imgdomain+'/api/getimages/'+cateid;
                console.log(url)
                this.$http.get(url).then(res=>{
                    res.body.message.forEach(item=>{
                        item.img_url='http://ofv795nmp.bkt.clouddn.com/'+item.img_url
                    })
                    this.picshowlist=res.body.message
                console.log(this.picshowlist)
                })
            },
        },
        created(){
            this.getpiclist();
            this.getpicshowlist(0);
        },
        ready(){

        }
    }
</script>
<style scoped>
    .tmp .pictureshow_header{
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
    }
    .tmp .pictureshow_header ul{
        width:800px;
        height: 40px;
        line-height: 40px;
    }
    .tmp .pictureshow_header ul li{
        float: left;
        margin-left: 10px;
    }
    image[lazy=loading] {
        width: 100%;
        height: 200px;
        margin: auto;
    }
    .mui-card-header > img:first-child{
        width: 100%;
        height: 250px;
    }
    .mui-card-content-inner{
        border: 0px;
    }
    .mui-card-header.mui-card-media{
        height: 200px !important;
    }
    .mui-card-header:after, .mui-card-footer:before{
        background-color:rgba(0,0,0,0);
    }
    .mui-card-content{
       border-bottom:1px solid rgba(102, 102, 102, 0.39);
    }
</style>